<template>
  <div class="cont">
    <div class="dia">
      <div class="header">
        <div class="title">轮询预案</div>
        <div class="close" @click="emit('close')"></div>
      </div>
      <div class="content">
        <div class="list">
          <div class="head">
            <div class="hrow">
              <span>画面轮巡时间</span>
              <el-button class="cusb2" @click="tonew">新建预案</el-button>
            </div>
            <div class="hrow">
              <el-select v-model="state.time" placeholder="请选择">
                <el-option label="1分钟" :value="1" />
                <el-option label="3分钟" :value="3" />
                <el-option label="5分钟" :value="5" />
                <el-option label="10分钟" :value="10" />
              </el-select>
              <el-button class="cusb2" @click="toview">开始应用</el-button>
            </div>
          </div>
          <el-table :data="state.data" height="232" stripe style="width: 100%;" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40" align="center" />
            <el-table-column prop="planName" label="方案名称" min-width="100" />
            <el-table-column label="操作" width="100" align="center">
              <template #default="scope">
                <el-button link @click="toedit(scope.row)">编辑</el-button>
                <el-button link @click="todel(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
const props = defineProps({
  oneData: Object
});
const emit = defineEmits(["close", 'view', 'new']);
const state = reactive({
  time: 3,
  plans: [],
  pm: {},
  data: []
})
const handleSelectionChange = (val) => {
  state.plans = val
}

const toview = () => {
  if (state.plans.length < 1) {
    ElMessage.error('请选择预案')
    return
  }
  let store = useMyStore()
  store.params.yav = { time: state.time, plans: state.plans }
  emit('view')
}
const getData = () => {
  useApi.post("/arhome/inspection/list", {}).then((res) => {
    state.data = res.data.inspectionPlans
  });
}

const tonew = () => {
  let store = useMyStore()
  store.params.ya = {}
  emit('new')
}
const toedit = (item) => {
  let store = useMyStore()
  store.params.ya = item
  emit('new')
}
const todel = (item) => {
  let pm = {
    optType: 'D',
    planId: item.planId
  }
  ElMessageBox.confirm(
    '确认删除当前记录？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      useApi.post("/arhome/inspection/edit", pm).then((res) => {
        getData()
      })
    })
}
onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.cont {
  width: 380px;
}

.dia {
  margin-top: 5px;
  width: 380px;
  height: 388px;
  display: flex;
  flex-direction: column;

  .header {
    width: 380px;
    height: 38px;
    display: flex;
    align-items: center;
    background-image: url('/images/bg03.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .title {
      margin-left: 30px;
      font-weight: 600;
      font-size: 14px;
      color: #FFFFFF;
    }

    .close {
      margin: 6px 9px 0 auto;
      background-image: url('/images/close.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 26px;
      height: 26px;
      cursor: pointer;
    }
  }

  .content {
    width: 380px;
    height: 350px;
    background-image: url('/images/bg04.png'), url('/images/bbg.png');
    background-size: 100% 10%, 100% 100%;
    background-position-y: 103%, 0;
    background-repeat: no-repeat;
    padding: 10px 10px 12px 10px;

    .list {
      width: 100%;
      height: 100%;
      padding: 10px 0 0 0;
      background-image: url('/images/mb2.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      font-size: 14px;
      color: #FFFFFF;

      .head {
        display: flex;
        flex-direction: column;

        .hrow {
          height: 38px;
          padding: 0 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
}

:deep(.el-table) {
  --el-table-header-bg-color: #67ADDC99;
  --el-table-header-text-color: #ffffffc0;
  --el-table-bg-color: #00000010;
  --el-table-border-color: #00000010;
  --el-table-text-color: #ffffffc0;
  --el-table-tr-bg-color: #12609394;
  --el-table-row-hover-bg-color: #00000033;
  margin-top: 10px;

  .el-table__header-wrapper {
    border-bottom: 1px solid #0F7BC4;
    border-image: linear-gradient(90deg, rgba(207, 245, 255, 0), rgba(233, 245, 255, .9), rgba(235, 251, 255, .9), rgba(163, 237, 255, 0)) 2 2;
  }
}

:deep(.el-table__row--striped td) {
  background-color: #00255040 !important;
}
:deep(.el-popper){
  --el-bg-color-overlay:#197EC1;
  --el-fill-color-light:#197EC1;
  --el-text-color-regular:#ffffff;
}
:deep(.el-select) {
  width: 200px;
  --el-input-text-color: #ffffff;
  

  .el-select__wrapper {
    background: #003D6399;
    color: #FFFFFF;
    border: none;
    box-shadow: none;
    border-radius: 0px !important;
  }
}

:deep(.el-checkbox) {
  --el-fill-color-blank: #003D6399;
  --el-checkbox-input-border: 1px solid #003D6399;
}

:deep(.el-button) {
  color: #ffffff;
}</style>